<template>
  <div class="service-qrcode">
    <loading :show="loading" />
    <template v-if="false">
      <cube-slide
        :speed="800"
        :interval="5000"
        class="swiper"
        :data="data.list"
      >
        <cube-slide-item
          v-for="(item, index) in data.list"
          :key="index"
          class="swiper-item"
        >
          <div class="image">
            <img :src="item" />
          </div>
        </cube-slide-item>
      </cube-slide>
    </template>
    <div class="x">
      <div class="image">
        <img :src="data.list[0]+'?'+new Date().getTime()" />
      </div>
    </div>
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'ServiceQrcode',
  components: {
    Loading
  },
  data() {
    return {
      loading: false,
      data: {
        list: [],
        qrcode: ''
      }
    }
  },
  methods: {
    /**
     * cache vue
     */
    getList() {
      const data = this.$store.getters['Qrcode/qrcode']
      if (data === null) {
        this.loading = true
        const code = '/service/referrer/'
        api.Exec.qrcodeList({ code }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Qrcode/set_data', data).then(() => {
            this.data = data
          })
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.data = data
      }
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped lang="stylus">
.service-qrcode
  .image
    background white
    padding 10px
</style>
